---
title: Breadcrumb
package: "@chakra-ui/breadcrumb"
image: "components/breadcrumb.svg"
description:
  Breadcrumbs, or a breadcrumb navigation, can help to enhance how users
  navigate to previous page levels of a website, especially if that website has
  many pages or products.
---

Breadcrumbs, or a breadcrumb navigation, can help enhance how users navigate to
previous page levels of a website, especially if that website has many pages or
products.

<ComponentLinks
  theme={{ componentName: "breadcrumb" }}
  github={{ package: "breadcrumb" }}
  npm={{ package: "@chakra-ui/breadcrumb" }}
/>

<carbon-ad></carbon-ad>

## Import

Chakra UI exports 4 breadcrumb-related components:

- `Breadcrumb`: The parent container for breadcrumbs.
- `BreadcrumbItem`: Individual breadcrumb element containing a link and a
  divider.
- `BreadcrumbLink`: The breadcrumb link.
- `BreadcrumbSeparator`: The visual separator between each breadcrumb.

```js
import {
  Breadcrumb,
  BreadcrumbItem,
  BreadcrumbLink,
  BreadcrumbSeparator,
} from "@chakra-ui/react"
```

## Usage

Add `isCurrentPage` prop to the `BreadcrumbItem` that matches the current path.
When this prop is present, the `BreadcrumbLink` renders a `span` with
`aria-current` set to `page` instead of an anchor element.

```jsx
<Breadcrumb>
  <BreadcrumbItem>
    <BreadcrumbLink href="#">Home</BreadcrumbLink>
  </BreadcrumbItem>

  <BreadcrumbItem>
    <BreadcrumbLink href="#">Docs</BreadcrumbLink>
  </BreadcrumbItem>

  <BreadcrumbItem isCurrentPage>
    <BreadcrumbLink href="#">Breadcrumb</BreadcrumbLink>
  </BreadcrumbItem>
</Breadcrumb>
```

### Separators

Change the separator used in the breadcrumb by passing a string, like `-` or an
icon.

```jsx
<Breadcrumb separator="-">
  <BreadcrumbItem>
    <BreadcrumbLink href="#">Home</BreadcrumbLink>
  </BreadcrumbItem>

  <BreadcrumbItem>
    <BreadcrumbLink href="#">About</BreadcrumbLink>
  </BreadcrumbItem>

  <BreadcrumbItem isCurrentPage>
    <BreadcrumbLink href="#">Contact</BreadcrumbLink>
  </BreadcrumbItem>
</Breadcrumb>
```

### Using an icon as the separator

```jsx
<Breadcrumb spacing="8px" separator={<ChevronRightIcon color="gray.500" />}>
  <BreadcrumbItem>
    <BreadcrumbLink href="#">Home</BreadcrumbLink>
  </BreadcrumbItem>

  <BreadcrumbItem>
    <BreadcrumbLink href="#">About</BreadcrumbLink>
  </BreadcrumbItem>

  <BreadcrumbItem isCurrentPage>
    <BreadcrumbLink href="#">Contact</BreadcrumbLink>
  </BreadcrumbItem>
</Breadcrumb>
```

## Composition

Breadcrumb composes [Box](/docs/layout/box) so you can pass all `Box` props to
change the style of the breadcrumbs. Let's say we need to reduce the `fontSize`
of the breadcrumbs.

```jsx
<Breadcrumb fontWeight="medium" fontSize="sm">
  <BreadcrumbItem>
    <BreadcrumbLink href="#">Home</BreadcrumbLink>
  </BreadcrumbItem>

  <BreadcrumbItem>
    <BreadcrumbLink href="#">About</BreadcrumbLink>
  </BreadcrumbItem>

  <BreadcrumbItem isCurrentPage>
    <BreadcrumbLink href="#">Current</BreadcrumbLink>
  </BreadcrumbItem>
</Breadcrumb>
```

## Usage with Routing Library

To use the Breadcrumb with a routing Library like Reach Router or React Router,
all you need to do is to pass the `as` prop to the `BreadcrumbLink` component.

It'll replace the rendered `a` tag with Reach's Link.

```jsx live=false
// import { Link } from "@reach/router"

<Breadcrumb>
  <BreadcrumbItem>
    <BreadcrumbLink as={Link} to="#">
      Home
    </BreadcrumbLink>
  </BreadcrumbItem>
  <BreadcrumbItem>
    <BreadcrumbLink as={Link} to="#">
      About
    </BreadcrumbLink>
  </BreadcrumbItem>
  <BreadcrumbItem isCurrentPage>
    <BreadcrumbLink>Contact</BreadcrumbLink>
  </BreadcrumbItem>
</Breadcrumb>
```

## Accessibility

- The Breadcrumbs are rendered in a `nav` to denote that it is a navigation
  landmark.
- The Breadcrumb `nav` has `aria-label` set to `breadcrumb`.
- The BreadcrumbItem with `isCurrentPage` prop adds the `aria-current=page` to
  the BreadcrumbLink.
- The separator has `role` set to `presentation` to denote that its for
  presentation purposes.

---

## Props

### Breadcrumb Props

<PropsTable of="Breadcrumb" />

### BreadcrumbItem Props

<PropsTable of="BreadcrumbItem" />

### BreadcrumbLink Props

The BreadcrumbLink composes the [Link](/docs/components/link) component so you
can use all Link props.

<PropsTable of="BreadcrumbLink" />

### BreadcrumbSeparator Props

The BreadcrumbSeparator composes the [Box](/docs/layout/box) component so you
can use all Box props.
